﻿module ContactUs

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.JQuery
open IntelliFactory.WebSharper.JQuery.Mobile
open System

[<Rpc>]
let postFeedbackAsync (s:string) = 
    async {
        let s2 = s
        return "Thanks for your feedback"
    }

[<JavaScript>]
let SubmitFeedback() = 
    async {
        let text = JQuery.Of("#feedbackText").Val() |> string
        let! resp = postFeedbackAsync text
        Nav.showNotification(resp,"#policies")
    }

type AnimConfg = {opacity:float}

[<JavaScript>]
let ContactUsPage () = 
    
    let header =
        Div [HTML5.Attr.Data "role" "header"; HTML5.Attr.Data "theme" "b"] -< [

                SiteCommon.homeButton()

                H1 [Text "Contact Us"]
            ]

    let content =
        Div [HTML5.Attr.Data "role" "content"; Attr.Id "contactuscontent"] -< [

//            Div [Attr.Class "ui-grid-a"] -< [
//
//                Div[Attr.Class "ui-block-a"; Attr.Align "right"; Attr.Style "padding:5px 5px 5px 5px"] -<  [Text "Company: "]
//                Div[Attr.Class "ui-block-b"] -<  [Text "XYZ Co."]
//
//                Div[Attr.Class "ui-block-a"; Attr.Align "right"] -<  [Text "Phone: "]
//                Div[Attr.Class "ui-block-b"] -<  [Text "(555)-123-4567"]
//
//                ]
//
            Div [HTML5.Attr.Data "role" "fieldcontain"] -< [
                Label [Attr.For "companyName"] -< [Text "Company:"]
                Input [Id "companyName"; Attr.ReadOnly "true"; Attr.Value "XYZ Co."; Attr.Style "background:lightgray"]
                ]

            Div [HTML5.Attr.Data "role" "fieldcontain"] -< [
                Label [Attr.For "companyPhone"] -< [Text "Phone:"]
                Input [Id "companyPhone"; Attr.ReadOnly "true"; Attr.Value "(555)-123-4567"; Attr.Style "background:lightgray"]
                ]

            Div [HTML5.Attr.Data "role" "fieldcontain"] -< [
                Label [Attr.For "feedbackText"] -< [Text "Feedback:"]
                TextArea [Id "feedbackText"; Attr.Style "background-color:yellow"]
                ]

            A[HTML5.Attr.Data "role" "button"] -< [Text "Submit"]
            |>! OnClick (fun _ _ -> 
                SubmitFeedback() |> Async.Start
                JQuery.Of("#contactuscontent").Animate(
                    {opacity = 0.10},
                    2000)
                |> ignore

                )
            ]

    let page = 
        Div [Id "contactus"; HTML5.Attr.Data "role" "page"] -< [
            header
            content
            SiteCommon.footer MainPages.ContactUs
            ]
        |>! OnBeforeShow (fun _ -> 
            JQuery.Of("#feedbackText").Val("") |> ignore
            JQuery.Of("#contactuscontent").Css("opacity","1.0") |> ignore
            )

    page
